<template>
  <!-- svg图标 -->
  <embed
    class="svg"
    src="/images/login/编组.svg"
    type="image/svg+xml"
  >
  <!-- 登录 -->
  <form>
    <input
      class="text-input"
      type="text"
      placeholder="请输入手机号"
      v-model.trim.number="obj.userId"
    >
    <input
      class="password-input"
      type="password"
      placeholder="请输入密码"
      v-model.trim="obj.password"
    >
    <button
      class="btn"
      @click.prevent="toLogin"
    >
      登录
    </button>
  </form>
  <!-- 注册 | 忘记密码 -->
  <div class="register">
    <router-link
      class="register-item"
      to="/register"
    >
      立即注册
    </router-link>
    <a href="JavaScript:;">忘记密码</a>
  </div>
</template>

<script setup  name='Login'>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { loginInfo } from '@/api/user'
import { setItem } from '@/utils/token'

// 声明变量
const router = useRouter()
const store = useStore()
const userInfo = reactive({})
const obj = reactive({
  userId: null,
  password: null
})

// 点击登录
async function toLogin () {
  // 结构相关数据
  const { userId, password } = obj
  // 判断账号密码是否为空
  if (userId === null && password === '') { return alert('账号密码不能为空') }
  // 发送用户数据
  const result = await loginInfo({ userId, password })
  if (result.token) {
    // 合并服务器返回的数据
    const user = Object.assign(userInfo, result)
    // 存储信息
    setItem('TOKEN', user)
    store.dispatch('sendData', user)
    router.push('/home')
  }
}
</script>

<style lang="less" scoped>
embed.svg {
  width: 70px;
  height: 70px;
  vertical-align: -15px;
  fill: currentColor;
  overflow: hidden;
  margin-top: 120px;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
form {
  margin-top: 40px;
  width: 100%;
  height: 192px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .text-input,
  .password-input {
    width: 295px;
    height: 48px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    border-radius: 5px;
    border: 1px solid rgba(128, 128, 128, 0.3);
  }
  .btn {
    width: 295px;
    height: 48px;
    background-color: #0091ff;
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
  }
}
.register {
  width: 100%;
  height: 25px;
  margin-top: 11px;
  text-align: center;
  line-height: 25px;
  a {
    font-size: 14px;
    color: gray;
  }
  .register-item::after {
    content: '|';
    display: inline-block;
    width: 27px;
    height: 25px;
    text-align: center;
    line-height: center;
  }
}
</style>
